<template>
	<view class="plate" v-if="pageData">
		<titleBox title="适用店铺"></titleBox>
		<view class="StoreList" v-for="(item, index) in pageData.slice(0, Num)" :key="index" @click="openStore(item)">
			<image :src="$imgUrls(item.logo)" mode="aspectFill" class="Store_img" v-if="item.logo"></image>
			<view class="flex-1 d-flex f-column m-left24">
				<text class="ellipsis size32 black">{{ item.name }}</text>
				<view class="d-flex a-center m-top10">
					<text class="h6 color" v-if="item.score">评分：{{ item.score }}</text>
					<text class="h6 color_33 m-left24" v-if="item.sales">销量：{{ item.sales }}</text>
				</view>
				<view class="row a-center m-top10">
					<text class="flex-1 ellipsis color_33 size26">{{ item.address }}</text>
					<view class="d-flex a-center">
						<view class="iconfont icon-a-zu3947 color h6"></view>
						<text class="color h6" v-if="item.distance">{{ item.distance }}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="row j-centert color size28 p-top24" v-if="Num == 2" @click="Num = pageData.length">查看全部</view>
	</view>
</template>

<script>
import titleBox from '@/subCard/components/titleBox.vue';
export default {
	props: ['pageData'],
	components: {
		titleBox
	},
	data() {
		return {
			headImg: 'https://msraimgcdn.mogoie.com/6099/1709797684310.JPG',
			Num: 2
		};
	},
	methods: {
		openStore(Item) {
			if (!Item.pointx || !Item.pointy) return;
			const obj = {
				s_latitude: Item.pointy,
				s_longitude: Item.pointx,
				name: Item.name,
				nameAdress: Item.address
			};
			this.$pop.openLocation(obj);
		}
	},
	watch: {
		pageData(newVal, oldVal) {
			if (!newVal) return;
			if (newVal && newVal.length > 2) {
				this.Num = 2;
			} else {
				this.Num = newVal.length;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.plate {
	width: 690rpx;
	margin: 0 auto;
	background-color: #ffffff;
	padding: 20rpx;
	border-radius: 10rpx;
	margin-top: 24rpx;
}
.titleBox {
	width: 100%;
	padding-left: 20rpx;
	color: var(--color);
	font-size: 30rpx;
	position: relative;
}
.titleBox::before {
	content: '';
	width: 4rpx;
	height: 30rpx;
	background-color: var(--color);
	position: absolute;
	left: 0;
	top: 50%;
	transform: translate(0, -50%);
}
.StoreList {
	width: 100%;
	padding: 24rpx 20rpx;
	margin-top: 20rpx;
	background-color: #f2f2f2;
	display: flex;
	align-items: center;
	border-radius: 10rpx;
	.Store_img {
		width: 100rpx;
		height: 100rpx;
		background-color: #ffffff;
		border-radius: 50%;
	}
}
</style>
